<template>
  <div style="display: flex;flex-direction: column;height:100%;width:100%;justify-content: space-between;">
    <div class="title">
      <el-image :src="require('@/assets/images/dataScreen/operationTitle.png')" style="width: 7px;height: 14px;margin-right: 10px"></el-image>
      <div>水源水质</div>
    </div>
    <div style="display: flex;height:90%;width:100%;flex-basis: 90%;flex-direction: column">
      <div style="display: flex;height:50%;width:100%;flex-basis: 50%;">
        <div style="display: flex;width:50%;flex-basis: 50%;" ><one-water-gague></one-water-gague></div>
        <div style="display: flex;width:50%;flex-basis: 50%;" ><two-water-gague></two-water-gague></div>
      </div>
      <div style="display: flex;height:50%;width:100%;flex-basis: 50%;">
        <div style="display: flex;width:50%;flex-basis: 50%;" ><three-water-gague></three-water-gague></div>
        <div style="display: flex;width:50%;flex-basis: 50%;"><four-water-gague></four-water-gague></div>

      </div>
    </div>
  </div>
</template>

<script>
import oneWaterGague from "@/views/dashboardwaterquality/sourcewaterquality/oneWaterGague";
import twoWaterGague from "@/views/dashboardwaterquality/sourcewaterquality/twoWaterGague";
import threeWaterGague from "@/views/dashboardwaterquality/sourcewaterquality/threeWaterGague";
import fourWaterGague from "@/views/dashboardwaterquality/sourcewaterquality/fourWaterGague";
import {getWaterStatics} from '@/api/ht/dataScreen'
const lineChartData = {
  newVisitis: {
    expectedData: 11,
    actualData: 22
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}

export default {
  name: "sourceWaterQuality",
  components: {
    oneWaterGague,
    twoWaterGague,
    threeWaterGague,
    fourWaterGague,
  },
   data() {
    return {
      lineChartData: lineChartData.newVisitis,
      waterSoledMonth:'',
      waterSupplyMonth:'',
      waterSoledRatio:'',
      waterSupplyRatio:'',
      timer:null,
      chartData: [
        {
          name: '运动与健康',
          value: '1100'
        },
        {
          name: '餐饮',
          value: '2800'
        },
        {
          name: '外出与旅行',
          value: '4500'
        },
        {
          name: '衣物',
          value: '2202'
        },
        {
          name: '电子游戏',
          value: '2421'
        },
        {
          name: '医药',
          value: '800'
        }

      ]
    }
  },
  mounted(){
    let that=this
    // that.handleSetLineChartData()
    that.timer=setInterval(function(){
      // that.handleSetLineChartData()
    },10000)
  },
  methods: {

    handleSetLineChartData() {
      getWaterStatics().then(res => {
        this.waterSoledMonth=res.data.waterSoledMonth
        this.waterSupplyMonth=res.data.waterSupplyMonth
        this.waterSoledRatio=res.data.waterSoledRatio
        this.waterSupplyRatio=res.data.waterSupplyRatio
      })
      // let that = this;
      // this.lineChartData = lineChartData.newVisitis
      //   let timer=setTimeout(function(){
      //     that.testTimer()
      //   },5000)
      //   this.$once('hook:beforeDestroy',()=>{
      //     clearTimeout(timer);
      //     timer = null;
      //   })
    },
    testTimer(){
      console.log("ttt")
    }
  },
  beforeDestroy(){
    clearInterval(this.timer)
    this.timer=null
  }
};
</script>

<style lang="scss" scoped >
.title{
  display: flex;
  height: 10%;
  flex-basis: 10%;
  color:white;
  font-size: 18px;
  font-weight: 700;
  align-items: center;
  //justify-content: center;
}
.main{
  display: flex;
  height: 90%;
  flex-basis: 90%;
  color:white;
  font-size: 14px;
  align-items: center;
}
</style>
